<template>
  <div>
    <!--     搜索框-->
    <div style="padding: 10px 0;">
      <el-select class="selectype" style="width: 90px" v-model="searchtype" placeholder="全部">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span>|</span>
      <el-input style="width: 200px" placeholder="搜索用户" suffix-icon="el-icon-search"
                v-model="searchinfo" clearable></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="searchMovieByAny(1,pageNum,pageSize)">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
      <el-popconfirm
          style="position: relative"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="确定批量冻结吗？"
          @confirm="batchFrozenRequest(0)"
      >
        <el-button slot="reference" style="position: relative; margin-left: 300px" type="danger">批量冻结<i
            class="el-icon-delete"></i></el-button>
      </el-popconfirm>
    </div>
    <!--        表格部分-->
    <el-table :data="tableData" border stripe @selection-change="handleSelectionDelete">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="userId" label="用户ID" width="60">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" width="250">
      </el-table-column>
<!--      <el-table-column prop="movieReleasedYear" label="发布年份" width="100">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="movieGenres" label="电影类型">-->
<!--      </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button type="success" @click="unfrozenUser([scope.row.userId])">解冻<i class="el-icon-edit-outline"></i>
          </el-button>
          <el-popconfirm
              style="margin-left: 5px"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="确定冻结该用户吗？"
              @confirm="frozenUser([scope.row.userId])"
          >
            <el-button slot="reference" type="danger">冻结<i class="el-icon-close"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--        分页组件-->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
      tableData: [],
      total: 0, //与分页的total绑定
      pageNum: 1,
      pageSize: 10,
      moviename: "",
      // 新增电影的表单
      insertMovieForm:{},
      dialogFormVisible: false,
      //初始查询参数
      movieName:"",
      movieGenre:"",
      // 批量删除
      multipleSelectionForDelete: [],
      options: [{
        value: '0',
        label: '电影名称'
      }, {
        value: '1',
        label: '电影类型'
      }],
      searchtype: '',
      searchinfo: '',
      FrozenUserForm:{},
    }
  },
  created() {
    // this.searchUserByAny(1,this.pageNum,this.pageSize)
    this.selectAllUsers(this.pageNum,this.pageSize)
  },
  methods:{
    selectAllUsers(pageNum,pageSize){
      this.request.get("/user/getAllUsers",{
        params:{
          page: pageNum,
          pageSize: pageSize
        }
      }).then(res =>{
        this.tableData = res.data.allUsers
        this.total = res.data.userNum
      })
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.searchMovieByAny(0,this.pageNum,pageSize)

    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      this.searchUserByAny(0,pageNum,this.pageSize)
    },
    reset(){
      this.moviename = ""
      this.searchUserByAny()
    },
    insertMovie(){
      this.request.post("/movie/insertOrEditMovie",this.insertMovieForm).then(res=>{
        if (res){
          this.$message.success(res.message)
          this.dialogFormVisible = false
          this.selectAllMovies()
        }else{
          this.$message.error(res.message)
        }
      })
    },
    frozenUser(row){
      this.FrozenUserForm.userIds = row
      this.FrozenUserForm.frozenTag = 0
      this.request.post("/user/frozenUsers/",this.FrozenUserForm).then(res=>{
        if(res){
          this.$message.success(res.message)
          this.selectAllUsers(this.pageNum,this.pageSize)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    unfrozenUser(row){
      this.FrozenUserForm.userIds = row
      this.FrozenUserForm.frozenTag = 1
      this.request.post("/user/frozenUsers/",this.FrozenUserForm).then(res=>{
        if(res){
          this.$message.success(res.message)
          this.selectAllUsers(this.pageNum,this.pageSize)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleSelectionDelete(val){
      console.log(val)
      this.multipleSelectionForDelete = val.map(v => v.userId)
      // this.multipleSelectionForDelete
    },
    batchFrozenRequest(frozenTag){
      this.FrozenUserForm.userIds = this.multipleSelectionForDelete
      this.FrozenUserForm.frozenTag = frozenTag
      this.request.post("/user/frozenUsers",this.FrozenUserForm).then(res=>{
        if(res){
          this.$message.success(res.message)
          this.selectAllUsers()
        }else{
          this.$message.error(res.message)
        }
      })
    },
    searchUserByAny(isSearch,page,pageSize){
    console.log(this.searchtype)
    if (isSearch == 1){ //如果是从搜索框进入的，则从第一页开始分页
      page = 1
    }
    this.request.get("/user/visitor/searchMovieByAny",{
      params:{
        page: page,
        pageSize: pageSize,
        searchType: this.searchtype,
        info: this.searchinfo
      }
    }).then(res=>{
      if(res){
        this.tableData = res.data.movieList
        this.total = res.data.movieNum
        this.$message.success(res.message)
      }else{
        this.$message.error(res.message)
      }
    })
  }
  }
}
</script>

<style scoped>

</style>